<template>
  <div>
    <el-table
      :data="perssimionData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.level == 4"
            @click="addMenu(row)"
            v-has="`btn.Permission.add`"
          >
            {{ row.level == 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="updateMenu(row)"
            :disabled="row.level == 1"
            v-has="`btn.Permission.update`"
            plain
          >
            编辑
          </el-button>
          <el-popconfirm
            :title="`确定要删除${row.name}么？`"
            @confirm="DeleteMeni(row)"
          >
            <template #reference>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                v-has="`btn.Permission.remove`"
                :disabled="row.level == 1"
                plain
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- dialog对话框 -->
    <el-dialog
      v-model="visable"
      :title="permParams.id == '' ? '添加菜单' : '修改菜单'"
      width="400px"
    >
      <el-form
        label-width="80px"
        style="padding-right: 20px; margin-top: 20px"
        :model="permParams"
        :rules="rules"
      >
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model.trim="permParams.name"></el-input>
        </el-form-item>
        <el-form-item label="权限值" prop="code">
          <el-input type="text" v-model.trim="permParams.code"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button plain @click="visable = false">取消</el-button>
        <el-button type="primary" @click="submitPermission">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="index">
import {
  AddOrUpdatePermission,
  DeleteMenu,
  getPermission,
} from '@/api/acl/menu'
import { Menuparams, permission, permissionChildren } from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
let perssimionData = ref<permissionChildren>()
let visable = ref(false)
let permParams = reactive<Menuparams>({
  id: '',
  code: '',
  level: '',
  name: '',
  pid: '',
  children: [],
})
onMounted(() => {
  getPermiss()
})
//获取菜单信息
const getPermiss = async () => {
  const result = await getPermission()
  perssimionData.value = result.data
}
const addMenu = (row: permission) => {
  visable.value = true
  let { level, pid } = row
  nextTick(() => {
    Object.assign(permParams, {
      id: '',
      code: '',
      level: '',
      name: '',
      pid: '',
      children: [],
    })
    permParams.level = level + 1
    permParams.pid = pid + 1
  })
}
const updateMenu = (row: permission) => {
  visable.value = true
  const { id, code, level, name, pid } = row
  Object.assign(permParams, { id, code, level, name, pid })
}
const submitPermission = async () => {
  const result = await AddOrUpdatePermission(permParams)
  console.log(permParams)
  if (result.code == 200) {
    getPermiss()
    visable.value = false
    ElMessage({
      type: 'success',
      message: permParams.id ? '修改成功' : '添加成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: permParams.id ? '修改失败' : '添加失败',
    })
  }
}
const DeleteMeni = async (row: permission) => {
  const result = await DeleteMenu(row.id)
  if (result.code == 200) {
    getPermiss()
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}
const rules = reactive({
  name: [
    { required: true, message: '名称为必填项', trigger: 'blur' },
    { min: 2, message: '名称不能小于两个字符', trigger: 'change' },
  ],
  code: [
    { required: true, message: '权限值为必填项', trigger: 'blur' },
    { min: 2, message: '权限值不能小于两个字符', trigger: 'change' },
  ],
})
</script>
<style scoped lang="less"></style>
